<template>
  <nav-bar>
      <template v-slot:default>个人中心</template>
  </nav-bar>
  <button @click="loginOut">退出登录</button>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRouter} from 'vue-router'
import NavBar from '../../components/common/navbar/NavBar.vue'
export default {
  components:{
    NavBar
  },
    setup () {
        const state = reactive({
            count: 0
        })
         const router = useRouter()
        const loginOut = () => {
          localStorage.removeItem('username')
          router.push('/login')
        }
       
        onMounted(() =>{
          if(localStorage.getItem("username") == null){
            router.push('/login')
          }
        })
        return {
            ...toRefs(state),
            loginOut
        }
    }
}
</script>

<style lang="scss" scoped>
button{
  margin-top: 60px;
}
</style>